<template>
	<view class="container">
		<view>
			<!--顶部商品轮播图-->
			<view>
				<swiper indicator-dots circular=true duration="400" class="swiper">
					<swiper-item class="swiper-item" >
						<view class="image-wrapper">
							<!-- <image src="item" class="loaded" mode="widthFix"></image> -->
							<image src="../../../static/index3.png" class="loaded" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 积分 -->
			<view class="jf_dh">
				<view class="jf_number" >
					<text class="jf_text">500</text>
					<text>积分</text>
					<!-- <text v-if="dataList.is_bi==2">
						<text style="margin-left: 6rpx;">+￥</text>
						<text class="jf_text">{{dataList.price}}</text>
					</text> -->
					<view class="baoyou_text">包邮</view>
				</view>

				<view class="dh_text">已兑换{{dataList.sales}}件</view>
			</view>
			<!-- 包邮 -->
			<view class="baoyou">

				<view class="baoyou_name">{{dataList.name}}</view>
			</view>
			<!-- 商品图片 -->
			<view>
				<rich-text :nodes="dataList.intro | formatRichText"></rich-text>
			</view>
			<!-- 积分兑换 -->
			<view class="dh_bottom">
				<view style="width: 20rpx;"></view>
				<view class="dh_dh_bg">
					<text>500</text>
					<text>积分购买</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				type: 'bi',
			}
		},
		filters: {
			formatRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
						match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
						match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
						return match;
					});
					newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
						match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
						return match;
					});
					newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					newContent = newContent.replace(/\<img/gi,
						'<img style="max-width:100%;height:auto;display:inline-block;margin:-8px auto;"');
					return newContent;
				} else {
					return '暂无商品详情'
				}
			}
		},
		methods: {
		},
		onLoad(option) {
		}
	}
</script>

<style lang="less">
	page {
		background-color: #FFFFFF;
	}

	.container /deep/ .uni-navbar__header-btns {
		padding-left: 30rpx;

		view {
			line-height: 1;
		}
	}

	.container /deep/ .uni-navbar__header-container {
		view {
			font-size: 32rpx;
			font-weight: 700;
		}
	}

	.swiper {
		width: 750rpx;
		height: 750rpx;
	}

	.swiper-item {
		width: 750rpx !important;
		height: 750rpx !important;
	}

	.jf_dh_picture {
		width: 100%;
	}

	.jf_dh {
		width: 96%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 1;
		margin: 24rpx 0 18rpx;
	}

	.jf_number {
		margin-left: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color:#F0812D;
		opacity: 1;
		display: flex;
		align-items: center;
	}

	.jf_text {
		font-size: 24rpx;
		font-weight: bold;
		margin-right: 8rpx;
		font-size: 32rpx;
	}

	.dh_text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.baoyou {
		display: flex;
		align-items: center;
		margin-top: 0rpx;
		margin-bottom: 26rpx;
	}

	.baoyou_text {
		width: 64rpx;
		height: 34rpx;
		background: #FFFFFF;
		border: 1px solid #707070;
		border-radius: 18rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #333333;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;


	}

	.baoyou_name {
		padding: 0 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		opacity: 1;
	}

	.dh_bottom {
		position: fixed;
		left: 0upx;
		bottom: 0upx;
		z-index: 95;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 750upx;
		height: 100upx;
		background: #F6F6F6;
	}

	.dh_dh_bg {
		/* background-image: url(../../../static/jifen/dh_bg.png); */
		/* background-repeat: no-repeat; */
		/* background-size: 200rpx 60rpx; */
		/* width: 200rpx; */
		background: linear-gradient(to right, #F3C44E, #ED6138);
		border-radius: 66rpx;
		padding: 0 15rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		float: right;
		margin-right: 30rpx;
		color: #FFFFFF;
	}
</style>
